<!DOCTYPE HTML>
<html>
<head>
    <title>My WebSocket 1</title>
</head>
<meta charset="UTF-8"/>
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<style>
    body {
        text-align: center
    }

    #divcss5 {
        margin: 0 auto;
        border: 1px solid #000;
        width: 800px;
        height: 600px
    }

    #message {
        margin: 0 auto;
        text-align: center;
        width: 800px;
        height: 500px;
        border: 1px solid #f00;
        overflow-y: scroll
    }

    #text {
        margin: 20px 60px;
        text-align: left;
        width: 500px;
        height: 60px;
        border: 1px solid #2b2b2b;
    }

    .left {
        padding-left: 10px;
        text-align: left;
        padding-right: 100px;
    }

    .right {
        padding-left: 100px;
        padding-right: 10px;
        margin: 0 auto;
        text-align: left
    }

    .rightright {
        padding-left: 100px;
        padding-right: 10px;
        margin: 0 auto;
        text-align: right;
        text-align: right
    }

    .state {
        color: chocolate;
        font-size: 20px;
    }

    .btn {
        width: 100px;
        height: 40px;
        float: right;
        margin-top: 30px;
        margin-right: 60px;
    }

    .close {
        padding: 5px 10px;
        float: right;
    }

    .main{
        width:100px;
        height:100px;
        background:red;
    }
    .yao{
        float:right;
    }
</style>
<body >
<!--type="button" class="btn btn-default"-->

<div class='main'>
    <div class='yao'>yaodebian</div>
</div>

<div class="btn btn-default" style="width: 200px;">

    <button  style="width: 200px" onclick=changeTalk()>name</button>
</div>



<div style="margin:0 auto;width: 800px;text-align: center;height: 100px;">
    Welcome 222222
    <button class="close" onclick="closeWebSocket()">断开连接</button>
</div>


<div id="divcss5">

    <div id="message">
    </div>
    <textarea id="text" style="OVERFLOW:hidden"></textarea>
    <button class="btn" onclick="send()">发送</button>

</div>
</body>

<script type="text/javascript" charset="utf-8">
    var websocket = null;

    //判断当前浏览器是否支持WebSocket
    if ('WebSocket' in window) {
        websocket = new WebSocket("ws://192.168.17.103:8011/yixian/websocket/{2}");
    }
    else {
        alert('Not support websocket')
    }

    //连接发生错误的回调方法
    websocket.onerror = function () {
        setMessageInnerHTML("error", 0);
    };

    //连接成功建立的回调方法
    websocket.onopen = function (event) {
        setMessageInnerHTML("open", 0);
    }

    //接收到消息的回调方法
    websocket.onmessage = function (event) {

        var obj = JSON.parse(event.data);
        console.log(obj);
        setMessageInnerHTML(obj.fromUser.name + ": " + obj.data.test, 1);
    }

    //连接关闭的回调方法
    websocket.onclose = function () {
        setMessageInnerHTML("close", 0);
    }

    //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
    window.onbeforeunload = function () {
        websocket.close();
    }

    //将消息显示在网页上
    function setMessageInnerHTML(innerHTML, style) {
        var msgDiv = document.getElementById('message');
        if (style == 1) {
            msgDiv.innerHTML += '<div class="left">' + innerHTML + '</div> <br/>';
        } else if (style == 2) {
            if (innerHTML.length > 40) {
                msgDiv.innerHTML += '<div  class="right">' + innerHTML + '</div> <br/>';
            } else {
                msgDiv.innerHTML += '<div  class="rightright">' + innerHTML + '</div> <br/>';
            }

        } else {
            msgDiv.innerHTML += '<div  class="state">' + innerHTML + '</div> <br/>';
        }
        msgDiv.scrollTop = msgDiv.scrollHeight;
    }

    //关闭连接
    function closeWebSocket() {
        websocket.close();
    }

    //发送消息
    function send() {
        var message = document.getElementById('text').value;
        if ("" == message) {
            return;
        }

        var json = "{ \"type\": \"0\", \"fromId\": \"2\", \"toIds\": [\"1\"],\"groupId\":\"\" ,\"data\":{ \"test\":\"" + message + "\"}}";

        websocket.send(json);
        setMessageInnerHTML("我：" + message, 2);
        document.getElementById('text').value = "";
    }
</script>
</html>